import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';

// 统计项配置
export interface StatItem {
  title: string;
  value: number | string;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
  valueStyle?: React.CSSProperties;
  precision?: number;
  formatter?: (value: any) => React.ReactNode;
}

// 统计卡片组件属性
export interface StatsCardsProps {
  stats: StatItem[];
  loading?: boolean;
  gutter?: number;
  cardSize?: 'small' | 'default';
  span?: number; // 每个卡片占用的栅格数
}

// 统计卡片组件
const StatsCards: React.FC<StatsCardsProps> = ({
  stats,
  loading = false,
  gutter = 16,
  cardSize = 'small',
  span,
}) => {
  // 计算每个卡片的栅格数
  const cardSpan = span || Math.floor(24 / stats.length);

  return (
    <div style={{ marginBottom: '16px' }}>
      <Row gutter={gutter}>
        {stats.map((stat, index) => (
          <Col key={index} span={cardSpan}>
            <Card size={cardSize} loading={loading}>
              <Statistic
                title={stat.title}
                value={stat.value}
                prefix={stat.prefix}
                suffix={stat.suffix}
                valueStyle={stat.valueStyle}
                precision={stat.precision}
                formatter={stat.formatter}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default StatsCards;
